<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="手机号">
        <el-input v-model="form.username"></el-input>
      </el-form-item>

      <el-form-item label="验证码" v-show="showchkcode">
        <div style="width:30%;float:left"><el-input v-model="form.chkcode"></el-input></div>
        <div style="float:left;margin-left:5px;">
          <el-button type="primary" @click="toMobile(form.username)" :loading="chkcodeloading" :disabled="chkcodedisabled">{{ chkcodestr }}</el-button>
          </div>
      </el-form-item>


      <el-form-item label="密码">
        <el-button type="warning" plain @click="checkpwd" v-model="form.password">修改密码</el-button>
      </el-form-item>

      <el-form-item label="昵称">
        <el-input v-model="form.nickname"></el-input>
      </el-form-item>

      <el-form-item label="上级">
        {{this.form.pname}}
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <!-- <el-button @click="onCancel">取消</el-button> -->
      </el-form-item>
    </el-form>




    <el-dialog title="修改密码" :visible.sync="showformpw" width="80%">
      <el-form :model="formpw">
        <el-form-item label="原密码">
          <el-input v-model="formpw.oldpw" type="password" placeholder="原密码" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="新密码">
          <el-input v-model="formpw.password" type="password" placeholder="新密码" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="新密码确认">
          <el-input v-model="formpw.repassword" type="password" placeholder="新密码确认" auto-complete="off"></el-input>
        </el-form-item>


        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showformpw = false">取 消</el-button>
        <el-button type="primary" @click="postnewpwd">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { updateUser } from "@/api/user";
import { getToken } from "@/utils/auth";

export default {
  computed: {
    ...mapGetters(["userInfo", "chkcode"]),
    showchkcode() {
      if (
        typeof this.userInfo === "undefined" ||
        typeof this.form === "undefined"
      ) {
        return false;
      }

      //console.log(this.form.username, this.userInfo.username);

      if (this.form.username != this.userInfo.username) {
        return true;
      } else {
        return false;
      }
    }
  },
  data() {
    return {
      form: {
        username: "", //this.userInfo.username,
        password: "",
        nickname: "", //this.userInfo.nickname,
        pname: "", //this.userInfo.pname
        chkcode: ""
      },
      formpw: {
        oldpw: "",
        password: "",
        repassword: ""
      },
      showformpw: false,
      chkcodeloading: false,
      chkcodestr: "发送验证码",
      chkcodedisabled: false
    };
  },
  methods: {
    onSubmit() {
      this.form.token = getToken();
      updateUser(this.form)
        .then(() => {})
        .catch(er => {
          console.log(er);
        });

      //this.$message("submit!");
    },
    onCancel() {
      this.$message({
        message: "cancel!",
        type: "warning"
      });
    },
    checkpwd() {
      this.showformpw = true;
    },
    postnewpwd() {
      this.$store
        .dispatch("Pwdchange", this.formpw)
        .then(response => {
          //console.log(response);
          this.showformpw = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    toMobile(tel) {
      if (!tel) {
        this.$message("手机号不能为空");
        return;
      }

      if (!this.chkcodedisabled) {
        this.$store
          .dispatch("PostChkCode", tel)
          .then(data => {
            console.log(data);
            if (data) {
              this.$message("验证码发送成功");
            } else {
              this.$message("验证码发送失败,请重试");
            }
          })
          .catch(er => console.log(er));
      }

      this.chkcodeloading = true;
      this.chkcodedisabled = true;
      let i = 60;
      let s = "重新发送 ";
      let times = setInterval(() => {
        i--;
        this.chkcodestr = s + "(" + i.toString() + ")";
        if (i <= 1) {
          this.chkcodestr = "发送验证码";
          this.chkcodedisabled = false;
          this.chkcodeloading = false;
          i = 10;
          clearInterval(times);
        }
      }, 1000);

      // setTimeout(() => {
      //   this.chkcodeloading = false;
      // }, 60000);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.form = Object.assign({}, this.userInfo);

      //this.form = this.form[0];
      console.log(this.userInfo, this.form);
    });
  }
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

